<template>
	<view class="content">
		<view class="orderInfo">
			<view class="top">
				<view class="left"  v-if="dataInfo.yida">
					运单号：{{dataInfo.yida.delivery_id}}
					<image src="../../static/image/copy-w.png" @click="copyBtn(dataInfo.yida.delivery_id||'')" class="copy" mode=""></image>
				</view>
				<view class="status" v-if="dataInfo.status=='uncollected'">待取件</view>
				<view class="status" v-if="dataInfo.status=='collected'">已取件</view>
				<view class="status" v-if="dataInfo.status=='shipped'">运输中</view>
				<view class="status" v-if="dataInfo.status=='received'">已签收</view>
				<view class="status" v-if="dataInfo.status=='canceled'">已取消</view>
				<view class="status" v-if="dataInfo.status=='abnormal'">异常状态</view>
			</view>
			<view class="bottom">
				<view class="bo-top">
					<view class="left" v-if="dataInfo.send_address">
						<view class="name">{{dataInfo.send_address.province}}，{{dataInfo.send_address.name}}</view>
					</view>
					<image src="../../static/image/left.png" class="left-icon" mode=""></image>
					<view class="right" v-if="dataInfo.receive_address">
						<view class="name">{{dataInfo.receive_address.province}}，{{dataInfo.receive_address.name}}</view>
					</view>
				</view>
				<view class="bo-bottom">
					<view class="left">下单时间：{{dataInfo.created_at}}</view>
					<view class="right" @click="goInfo('/pages-send/orderInfo/orderInfo?id='+dataInfo.id)">查看详情 ></view>
				</view>
			</view>
		</view>
		<view class="trajectory">
			<view class="title">物流详情</view>
			<view class="context">
				<view class="textList" v-for="(item,index) in expressList">
					<view class="left">
						<view class="circle" :style="index==0?'background: #1AA261;border:none;':''"></view>
						<view class="line" :style="index==0?'border: 1rpx dotted #1AA261;':''" v-if="index!=expressList.length-1"></view>
						
					</view>
					<view class="right">
						<view class="msg" :style="index==0?'color: #1AA261;':''">{{item.desc}}</view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="btns">
			<view class="btn" v-if="dataInfo.pay_status=='unpaid'" @click="pay">支付</view>
			<view class="btn" v-if="dataInfo.pay_status=='supplementary'" @click="pay">补缴</view>
			<view class="btn" v-if="dataInfo.status=='uncollected'" @click="cancel">取消订单</view>
			<view class="btn" style="background:#1AA261;color:#fff;" @click="goInfo('/pages-send/workOrderSubmit/workOrderSubmit?orderId='+dataInfo.id)">提交工单</view>
		</view>
	</view>
</template>

<script>
	import {orderInfo,orderTraceInfo,orderDel} from '../../common/api.js'
	export default {
		data() {
			return {
				dataInfo:{},
				expressList:[]
			}
		},
		onLoad(e) {
			this.getInfo(e.id)
		},
		methods: {
			getInfo(id){
				orderInfo({id}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.dataInfo = res.data
						this.getList(this.dataInfo.yida.delivery_id)
					}
				})
			},
			getList(delivery_id){
				orderTraceInfo({
					delivery_id
				}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.expressList = res.data
					}
				})
				// this.expressList = JSON.parse(uni.getStorageSync("expressList")).data
			},
			goInfo(url){
				uni.navigateTo({
					url:url
				})
			},
			cancel(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消改订单?',
					success: function (res) {
						if (res.confirm) {
							orderDel({id:that.dataInfo.id}).then(res=>{
								if(res.code==10000){
									uni.showToast({
										title: '取消成功',
										duration: 2000,
										icon:"none"
									});
									setTimeout(()=>{
										uni.reLaunch({
											url: '/pages/order/order'
										});
									},500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			copyBtn(num){
				uni.setClipboardData({
					data: num,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>
<style>
	page{
		background: #EDEFF2;
	}
</style>
<style scoped lang="scss">
.content{
	width: 750rpx;
	padding: 32rpx;
	box-sizing: border-box;
	.trajectory{
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			border-bottom: 1rpx solid #EEEEEE;
			padding-bottom: 29rpx;
		}
		.context{
			margin-top: 40rpx;
			.textList{
				display: flex;
				flex-wrap: nowrap;
				// margin-bottom: 50rpx;
				.left{
					height: auto;
					.circle{
						width: 15rpx;
						height: 15rpx;
						border: 2rpx solid #CCCCCC;
						background: #fff;
						border-radius: 50%;
						margin-top: 20rpx;
					}
					.line{
						width: 2rpx;
						height:100%;
						// background: #CCCCCC;
						border: 1rpx dotted #CCCCCC;
						border-radius: 5rpx;
						margin-top: 10rpx;
						margin-left: 50%;
						transform: translateX(-50%);
						margin-top: 0rpx;
					}
				}
				.right{
					margin-left: 12rpx;
					.time{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						line-height: 20rpx;
						text-align: left;
						font-style: normal;

						margin-top: 18rpx;
						margin-bottom: 40rpx;
					}
					.msg{
						
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}
	.orderInfo{
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		.top{
			padding: 28rpx 32rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #1AA261;
			.left{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.copy{
					width: 24rpx;
					height: 24rpx;
					margin-left: 16rpx;
				}
			}
			.status{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}
		}
		.bottom{
			background: #fff;
			padding: 28rpx 32rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			.bo-top{
				display: flex;
				justify-content: space-around;
				align-items: center;
				.left,.right{
					.name{
						margin-top: 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.right{
					.name{
						text-align: right;
					}
				}
				.left-icon{
					width: 52rpx;
					height: 14rpx;
				}
			}
			.bo-bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
					line-height: 20rpx;
					text-align: left;
					font-style: normal;

				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #1AA261;
					line-height: 20rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}
	}
	.btns{
		margin: 32rpx 0;
		display: flex;
		justify-content: space-around;
		.btn{
			width: 180rpx;
			height: 68rpx;
			border:1rpx solid #1AA261;
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #1AA261;
			line-height: 68rpx;
			text-align: center;
			font-style: normal;
		}
	}
}
</style>
